<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .demo {
        margin-bottom: 20px;
        border: 1px solid #ebedf0;
        border-radius: 2px;
        padding: 10px;
      }
      .demo div {
        margin-bottom: 10px;
        font-size: 14px;
      }

      .pagination {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        list-style: none;
        display: inline-block;
      }
      .pagination.hide {
        display: none;
      }
      .pagination li {
        position: relative;
        display: inline-block;
        float: left;
        height: 32px;
        margin: 0;
        padding: 0 15px;
        line-height: 30px;
        background: #fff;
        border: 1px solid #d9d9d9;
        border-top-width: 1.02px;
        border-left: 0;
        cursor: pointer;
        transition: color 0.3s, border-color 0.3s;
      }
      .pagination li:first-child {
        border-left: 1px solid #d9d9d9;
        border-radius: 4px 0 0 4px;
      }
      .pagination li:last-child {
        border-radius: 0 4px 4px 0;
      }
      .pagination li:first-child {
        box-shadow: none !important;
      }
      .pagination li.current {
        border-color: #1890ff;
        color: #1890ff;
        border-left: 1px solid #1890ff;
      }
      .pagination li.current:not(:first-child) {
        margin-left: -1px;
      }
    </style>
  </head>

  <body>
    <div>
      <div id="jsContainer">
        <ul class="pagination">
          <li>首页</li>
          <li>8</li>
          <li>9</li>
          <li class="current">10</li>
          <li>11</li>
          <li>12</li>
          <li>末页</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo1) total: 10，current: 4</div>
        <ul class="pagination">
          <li>首页</li>
          <li>2</li>
          <li>3</li>
          <li class="current">4</li>
          <li>5</li>
          <li>6</li>
          <li>末页</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo2) total: 0，current: 0</div>
        <ul class="pagination hide"></ul>
      </div>

      <div class="demo">
        <div>(Demo3) total: 3，current: 2</div>
        <ul class="pagination">
          <li>1</li>
          <li class="current">2</li>
          <li>3</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo4) total: 10，current: 2</div>
        <ul class="pagination">
          <li>1</li>
          <li class="current">2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>末页</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo5) total: 10，current: 9</div>
        <ul class="pagination">
          <li>首页</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li class="current">9</li>
          <li>10</li>
        </ul>
      </div>
    </div>
    <script type="text/javascript">
      /**
       * 这题还蛮贴心的，todo的位置都标明了，其他的咱就不解析了，单论让我们补全的内容 
       * 前两个todo还是明了的，重点是在于生成html字符串时判断边界条件那一块，因为这题描述容易误解，
       * 说人话就是当前页面往前俩到了1的位置就不需要首页，往后俩到了尾部就不需要末页，并且在少于5个数的前提下尽量多，
       * 要是被带偏了以数量为标准那可就写复杂了，有没有首尾部其实是当前页面在哪决定的，
       * 当前页面往前俩没到1，往后俩没到底，不就是首尾都存在，并且内含一定有五个数的前提
       * 稍微复杂的情况呢，往前俩没到1，往后俩到底了，有头无尾对吧，
       * 那end肯定是最后一个数，但start一定是尾部减4吗，万一不够减呢，不就小于1了，所以需要判断对吧，
       * 后面的情况也同理了，最后拼接一下返回即可
       */
      //测例
      Pagination(document.getElementById("jsContainer"), 4, 1);
      function Pagination(container, total, current) {
        this.total = total;
        this.current = current;
        this.html = html;
        this.val = val;
        this.el = null;
        //TODO: 创建分页组件根节点
        this.el = document.createElement("ul");
        if (!this.el) return;

        this.el.innerHTML = this.html();
        container.appendChild(this.el);
        this.el.className = "";
        //TODO: 判断是否需要隐藏当前元素
        if (this.total <= 1) {
          this.el.className = "pagination hide";
        } else {
          this.el.className = "pagination";
        }

        function html() {
          if (this.total <= 1) return "";

          //TODO: 生成组件的内部html字符串

          let startNum = 1;
          let endNum = this.total;
          let headerHtml = `<li>首页</li>`;
          let footerHtml = `<li>末页</li>`;

          if (current - 2 > 1 && current + 2 < this.total) {
            //有头部有尾部
            startNum = current - 2;
            endNum = current + 2;
          } else if (current - 2 > 1 && current + 2 >= this.total) {
            //有头部无尾部
            startNum = (this.total - 4)>0? (this.total - 4):1;
            endNum = this.total;
            footerHtml = "";
          } else if (current - 2 <= 1 && current + 2 < this.total) {
            //无头部有尾部
            startNum = 1;
            endNum = Math.min(this.total, 5);
            headerHtml = "";
          } else {
            //无头部无尾部
            startNum = 1;
            endNum = this.total;
            headerHtml = "";
            footerHtml = "";
          }
          let bodyHtml = "";
          for (let i = startNum; i <= endNum; i++) {
            bodyHtml += `<li ${
              current == i ? 'class="current"' : ""
            }>${i}</li>`;
          }
          return `${headerHtml}${bodyHtml}${footerHtml}`;
        }

        function val(current) {
          if (arguments.length === 0) return this.current;
          if (current < 1 || current > this.total || current === this.current)
            return;
          this.current = current;
          this.el.innerHTML = this.html();
        }
      }
    </script>
  </body>
</html>
